<template>
	<van-tabbar v-model="active">
		<van-tabbar-item to="/index">
			<template #icon="props">
				<img class="icon" :src="props.active ? indexAct : index" />
			</template>
		</van-tabbar-item>
		<van-tabbar-item to="/category">
			<template #icon="props">
				<img class="icon" :src="props.active ? categoryAct : category" />
			</template>
		</van-tabbar-item>
		<van-tabbar-item to="/found">
			<template #icon="props">
				<img class="icon" :src="props.active ? foundAct : found" />
			</template>
		</van-tabbar-item>
		<van-tabbar-item to="/shopcar">
			<template #icon="props">
				<img class="icon_spe" :src="props.active ? shopcarAct : shopcar" />
			</template>
		</van-tabbar-item>
		<van-tabbar-item to="/my">
			<template #icon="props">
				<img class="icon" :src="props.active ? myAct : my" />
			</template>
		</van-tabbar-item>
	</van-tabbar>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, getCurrentInstance, watch, defineEmits, ref } from 'vue';
const index = require('@/assets/img/tabBar/index.png');
const indexAct = require('@/assets/img/tabBar/index_act.png');
const category = require('@/assets/img/tabBar/category.png');
const categoryAct = require('@/assets/img/tabBar/category_act.png');
const found = require('@/assets/img/tabBar/found.png');
const foundAct = require('@/assets/img/tabBar/found_act.png');
const shopcar = require('@/assets/img/tabBar/shopcar.png');
const shopcarAct = require('@/assets/img/tabBar/shopcar_act.png');
const my = require('@/assets/img/tabBar/my.png');
const myAct = require('@/assets/img/tabBar/my_act.png');

const { proxy } = getCurrentInstance();
const active = ref(0);
onMounted(() => {
	active.value={
			'index': 0,
			'category':1,
			'found':2, 
			'shopcar':3,
			'my':4
		}[proxy.$store.state.index.page]
});
//防止tab触发不正确
watch(
	//当route.path改变时
	() => proxy.$store.state.index.page,
	() => {
		active.value={
			'index': 0,
			'category':1,
			'found':2, 
			'shopcar':3,
			'my':4
		}[proxy.$store.state.index.page]
		// if(proxy.$store.index.page=='index') active.value=0;
		// else if(proxy.$store.index.page=='category') active.value=1;
		// else if(proxy.$store.index.page=='found') active.value=2;
		// else if(proxy.$store.index.page=='shopcar') active.value=3;
		// else if(proxy.$store.index.page=='my') active.value=4;
	}
);
const props = defineProps({});
const data = reactive({});
const {} = toRefs(data);
</script>

<style lang="scss" scoped>
 .van-tabbar{
	max-width: 768PX !important;
	left: 50% !important;
	transform: translateX(-50%);
}
.icon {
	margin-top: 8px;
	width: 42px * 0.5;
	height: 72px * 0.5;
}
.icon_spe {
	margin-top: 8px;
	width: 63px * 0.5;
	height: 72px * 0.5;
}
</style>
